<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
<route lang="jsonc" type="home">
{
	"layout": "tabbar",
	"style": {
		// 'custom' 表示开启自定义导航栏，默认 'default'
		"navigationStyle": "custom",
		"navigationBarTitleText": "首页"
	}
}
</route>

<script lang="ts" setup>
import { openDoor } from '@/api/door';
import { refresh } from '@/api/door/token';
import { doorStore } from '@/store/door';
import { copyText, getFileUrl } from '@/utils/common/index';

defineOptions({
	name: 'Home'
});
const useDoorStore = doorStore();
// 获取屏幕边界到安全区域距离
let safeAreaInsets;
let systemInfo;

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo();
safeAreaInsets = systemInfo.safeArea
	? {
			top: systemInfo.safeArea.top,
			right: systemInfo.windowWidth - systemInfo.safeArea.right,
			bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
			left: systemInfo.safeArea.left
	  }
	: null;
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync();
safeAreaInsets = systemInfo.safeAreaInsets;
// #endif
const tokenKey = ['token', 'unionToken'];
const state = reactive({
	showModal: false,
	token: '',
	tokenType: 'token' as 'token' | 'unionToken'
});

const workBenchList = ref([
	{
		label: '导入TOKEN',
		value: '1',
		icon: '2025011808.png',
		show: true
	},
	{
		label: '开门',
		value: '2',
		icon: '2025011809.png',
		show: true
	},
	{
		label: '导出TOKEN',
		value: '3',
		icon: '2025011810.png',
		fields: 'newCustomerCount',
		show: true
	},
	{
		label: '刷新TOKEN',
		value: '4',
		icon: '2025011816.png',
		show: true
	}
	// {
	// 	label: '套餐',
	// 	value: '5',
	// 	icon: '2025011811.png',
	// 	show: true,
	// },
	// {
	// 	label: '风格案例',
	// 	value: '6',
	// 	icon: '2025011814.png',
	// 	show: true,
	// },
	// {
	// 	label: '建材城',
	// 	value: '7',
	// 	icon: '2025011812.png',
	// 	show: true,
	// },
	// {
	// 	label: '工艺馆',
	// 	value: '9',
	// 	icon: '2025022701.png',
	// 	show: true,
	// },
	// {
	// 	label: '标准文件',
	// 	value: '8',
	// 	icon: '2025011813.png',
	// 	show: true,
	// },
	// {
	// 	label: '渠道管理',
	// 	value: '10',
	// 	icon: '2025022702.png',
	// 	show: false,
	// },
	// {
	// 	label: '区域管理',
	// 	value: '12',
	// 	icon: '2025051901.png',
	// 	show: true,
	// },
	// {
	// 	label: '优惠券',
	// 	value: '11',
	// 	icon: '2025041801.png',
	// 	show: true,
	// },
]);
// 测试 uni API 自动引入
onLoad(() => {});

function handleToWorkBench(val: string) {
	// 导入token
	if (val == '1') {
		state.showModal = true;
	} else if (val == '2') {
		const params = useDoorStore.getParams();
		openDoor(params)
			.then((res: EmptyObjectType) => {
				if (res.code === 0) {
					uni.showToast({
						title: res.msg || '开门成功',
						icon: 'none'
					});
				} else {
					throw res.msg;
				}
			})
			.catch((err) => {
				uni.showToast({
					title: err || '操作失败',
					icon: 'none'
				});
			});
	} else if (val === '3') {
		copyText(useDoorStore.getToken());
	} else if (val === '4') {
		refreshToken();
	}
}

function refreshToken() {
	refresh()
		.then((result: any) => {
			const token = result.object.app_token;
			useDoorStore.setToken('token', token);
			uni.showToast({
				title: '刷新成功',
				icon: 'none'
			});
		})
		.catch((err) => {
			console.error(err);
		});
}

function confirm() {
	if (!state.token) {
		return uni.showToast({
			title: '请填写token'
		});
	}
	useDoorStore.setToken(state.tokenType, state.token);
	state.showModal = false;
	uni.showToast({
		title: '导入成功',
		icon: 'none'
	});
}

function cancel() {
	state.showModal = false;
}
</script>

<template>
	<!-- 工作台 -->
	<view class="work-bench-title">工作台</view>
	<view class="work-bench" style="margin-top: 46.15rpx">
		<template v-for="item in workBenchList" :key="item.label">
			<view v-if="item.show" class="work-bench-item" @click="handleToWorkBench(item.value)">
				<view class="icon">
					<image :src="getFileUrl(item.icon)" />
				</view>
				<view class="text">
					<text>{{ item.label }}</text>
				</view>
			</view>
		</template>
	</view>
	<!-- 工作台end -->

	<!-- 添加token -->
	<up-modal :show="state.showModal" title="导入token" show-cancel-button @cancel="cancel" @confirm="confirm">
		<view class="slot-content">
			<up-radio-group v-model="state.tokenType" placement="row">
				<up-radio :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in tokenKey" :key="index" :label="item" :name="item"></up-radio>
			</up-radio-group>
			<u-textarea v-model="state.token" style="width: 100%; box-sizing: border-box" :maxlength="99999" placeholder="请输入token" />
		</view>
	</up-modal>
</template>

<style lang="scss">
.work-bench-title {
	width: calc(750rpx - 23.08rpx - 23.08rpx);
	margin: 46.15rpx auto 38.46rpx auto;
	font-family: PingFang SC-Medium;
	font-weight: 600;
	font-size: 38.46rpx;
	padding-top: 32rpx;
	color: #222222;
}
.slot-content {
	box-sizing: border-box;
	width: 100%;
}
.work-bench {
	width: calc(750rpx - 23.08rpx - 23.08rpx);
	margin: 0 auto 23.08rpx auto;
	background: transparent;
	border-radius: 15.38rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: wrap;

	.work-bench-item {
		width: 25%;
		text-align: center;
		margin-bottom: 46.15rpx;

		.icon {
			width: 107.69rpx;
			height: 107.69rpx;
			margin: 0 auto 15.38rpx auto;
			position: relative;

			.count {
				position: absolute;
				right: -15.38rpx;
				top: -7.69rpx;
				//width: 59.62rpx;
				height: 38.46rpx;
				background: #ff3c18;
				border-radius: 57.69rpx;
				box-sizing: border-box;
				border: 3.85rpx solid #ffffff;
				padding: 0 11.54rpx;
				font-family: 'PingFang SC-Regular';
				font-weight: 400;
				font-size: 23.08rpx;
				color: #ffffff;
				line-height: calc(38.46rpx - 3.85rpx);
			}

			> image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		.text {
			font-family: PingFang SC-Medium;
			font-weight: 400;
			font-size: 26.92rpx;
			color: #333333;
			line-height: 31.55rpx;
			text-align: center;
		}
	}
}
</style>
